{extend name="main"}
{block name="style"}
<style type="text/css">
.w-60px{width: 60px;}
.w-80px{width: 80px;}
.w-150px{width: 150px;}
.wx-wechat{width: 320px;height: 560px;margin: 0 auto;position: relative;background-color: #eee;border:solid 1px #ddd;}
.wx-wechat .wx-wechat-header{width: 100%;height:64px;line-height:64px;background-color: #343434;color: #fff;text-align: center;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
	<div class="flex">
		<div class="flex-1 pr-3">
			<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">

			  <el-form-item label="Alias" prop="alias">
			    <el-input v-model="form.alias" class="col-12 col-sm-6 pl-0 pr-0" placeholder="Alias" maxlength="50" show-word-limit></el-input>
			  </el-form-item>

			  <el-form-item label="模板编号" prop="number">
			    <el-input v-model="form.number" class="col-12 col-sm-6 pl-0 pr-0" placeholder="ID" maxlength="100" show-word-limit></el-input>
			  </el-form-item>

			  <el-form-item label="名称" prop="title">
			    <el-input v-model="form.title" class="col-12 col-sm-6 pl-0 pr-0" placeholder="Title" maxlength="100" show-word-limit></el-input>
			  </el-form-item>

			  <el-form-item label="模板ID" prop="tplid">
			    <el-input v-model="form.tplid" class="col-12 col-sm-12 pl-0 pr-0"  maxlength="200" show-word-limit></el-input>
			  </el-form-item>

			  <el-form-item label="First" prop="first">
			    <el-input type="textarea" v-model="form.first" class="col-12 col-sm-12 pl-0 pr-0"  maxlength="200" show-word-limit
				  :autosize="{ minRows: 2, maxRows: 10}">
				  </el-input>
			  </el-form-item>

			  <el-form-item label="First颜色" prop="first_color">
				  <el-color-picker v-model="form.first_color" size="small"></el-color-picker>
			  </el-form-item>

			  <el-form-item label="Remark" prop="remark">
			    <el-input type="textarea" v-model="form.remark" class="col-12 col-sm-12 pl-0 pr-0" maxlength="200" show-word-limit
				  :autosize="{ minRows: 2, maxRows: 10}"></el-input>
			  </el-form-item>

			  <el-form-item label="Remark颜色" prop="remark_color">
				  <el-color-picker v-model="form.remark_color" size="small"></el-color-picker>
			  </el-form-item>

			  <el-form-item label="ItemData" prop="ItemData">
			  	<div class="flex" v-for="(v,index) in form.item_data">
			  		<div class="w-60px">
			  			{{v.title}}:
			  		</div>
			  		<div class="w-150px">
			    		<el-input v-model="v.value" class="col-12 col-sm-12 pl-0 pr-0" size="mini" placeholder="变量名" clearable></el-input>
			  		</div>
			  		<div class="pl-1">
			  			<i class="el-icon-close pointer text-danger" @click="delItemData(index)"></i>
			  		</div>
			  	</div>
			  </el-form-item>

			  <el-form-item label="添加ItemData" v-if="form.item_data.length<10">
			  	<div class="flex">
			  		<div class="w-150px">
				    	<el-input v-model="ItemData.title" placeholder="Title" size="small"></el-input>
			  		</div>
			  		<div class="px-1">-</div>
			  		<div class="w-150px">
				    	<el-input v-model="ItemData.value" placeholder="变量名" size="small"></el-input>
			  		</div>
			  		<div class="px-1 pt-1">
				  		<el-color-picker v-model="ItemData.color" @change="setDefaultColor" size="small"></el-color-picker>
			  		</div>
			  		<div class="pl-1">
			    		<el-button type="success" @click="addItemData" :disabled="!ItemData.title || !ItemData.value" size="small">添加</el-button>
			  		</div>
			  	</div>
			  </el-form-item>

			  <el-form-item label="URL" prop="url">
			    <el-input v-model="form.url" class="col-12 col-sm-12 pl-0 pr-0"></el-input>
			  </el-form-item>

			  <el-form-item label="状态" prop="status">
			    <el-radio-group class="ml-0 ml-sm-2" v-model="form.status">
			      <el-radio :label="1">正常[默认]</el-radio>
			      <el-radio :label="0">停用</el-radio>
			    </el-radio-group>
			  </el-form-item>

			  <el-form-item>
			    <el-button type="primary" @click="submitForm('form')">立即保存</el-button>
			    <el-button @click="resetForm('form')">重置</el-button>
			  </el-form-item>
			</el-form>
		</div>
		<div class="flex-1 pl-3">
			<el-divider content-position="left">模板预览</el-divider>
			<div class="wx-wechat">
				<div class="wx-wechat-header">
					{:config('web.name')}
				</div>
				<div class="wx-wechat-body p-3">
					<div class="bg-white rounded border p-2">
						<div>{{form.title}}</div>
						<div class="small" :style="{color:form.first_color}" v-html="conGetHtml(form.first)"></div>
					  	<div class="flex" v-for="(v,index) in form.item_data">
					  		<div class="w-60px small text-secondary">
					  			{{v.title}}:
					  		</div>
					  		<div class="flex-1 small" :style="{color:v.color}">
					  			{{'keyword'+(index+1)+'.DATA'}}
					  		</div>
					  	</div>
					  	<div class="flex" v-if="form.remark">
					  		<div class="w-60px small text-secondary">
					  			备注:
					  		</div>
					  		<div class="flex-1 small" :style="{color:form.remark_color}" v-html="conGetHtml(form.remark)">
					  		</div>
					  	</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="text-secondary small">
		<p>可用变量：uid,nickname,title,status</p>
		<p>First，Remark使用变量需要用花括号，例：“您的UID为{uid}”</p>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="Find"}
	var url='/wechat/addPushTpl';
	var is_edit=false;
	var formData={
				alias:'',
				number:'',
				title:'',
				tplid:'',
				first:'',
				first_color:'#343434',
				remark:'',
				remark_color:'#343434',
				item_data:[],
				url:'',
				status:1,
			};
	{else/}
	var url='/wechat/editPushTpl/{$Find.id}';
	var is_edit=true;
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			form:formData,
			is_edit:is_edit,
			repeat_disabled:false,
			ItemData:{title:'',value:'',color:'#343434'},
	        rules: {
	          alias: [
	            { required: true, message: '请输入Alias', trigger: 'blur' },
	          ],
	          title: [
	            { required: true, message: '请输入名称', trigger: 'blur' },
	          ],
	          tplid: [
	            { required: true, message: '请输入模板ID', trigger: 'blur' },
	          ],
	          first: [
	            { required: true, message: '请输入First', trigger: 'blur' },
	          ],
	          remark: [
	            { required: true, message: '请输入Remark', trigger: 'blur' },
	          ],
	          status: [
	            { required: true, message: '请选择状态', trigger: 'blur' },
	          ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
		methods:{
	    	conGetHtml:function(str){
		      if (str) {
		        return str.replace(/\n/g, '<br/>');
		      }else{
		        return '';
		      }
		    },
			delItemData(index){
				this.form.item_data.splice(index,1);
			},
			setDefaultColor(val){
				if (!val)
					this.ItemData.color='#343434';
			},
			addItemData:function(){
				if (!this.ItemData.title || !this.ItemData.value) {
					XYBase.warning('候选项Title或Value不能为空');
					return;
				}
				this.form.item_data.push({
					title:this.ItemData.title,
					value:this.ItemData.value,
					color:this.ItemData.color});
				this.ItemData={title:'', value:'',color:'#343434'};
			},
			updateFormData(){
				var _this=this;
				$.getJSON(url,function(ret){
					if (ret){
						if (ret.code === 0) {
							_this.form=ret.data;
							return;
						}
					}
					window.location.reload();
				})
			},
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:url,
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
									if(!_this.is_edit){
										_this.resetForm(formName);
									}else{
										_this.updateFormData();
									}
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}